<template>
	<view class="indexPage">
		<view class="page">
			<view class="fixedTop">
			<!-- 	<view class="nav" :class="isFixed && isMy?'fiexed':''">
					<view class="navTabBox">
						<view class="longTab">
							<scroll-view scroll-x="true" style="white-space: nowrap; display: flex" scroll-with-animation :scroll-left="tabLeft">
								<view
									class="longItem"
									:style="'width:' + isWidth + 'px'"
									:data-index="index"
									:class="index === tabClick ? 'click' : ''"
									v-for="(item, index) in tabTitle"
									:key="index"
									:id="'id' + index"
									@click="longClick(index)"
								>
									{{ item.name }}
								</view>
								<view class="underlineBox" :style="'transform:translateX(' + isLeft + 'px);width:' + isWidth + 'px'"><view class="underline"></view></view>
							</scroll-view>
						</view>
					</view>
				</view> -->
			<!-- 佔位 -->
			<view class="leftbox">
				<view class="list" :class="tabClick == index?'active':''" v-for="(item, index) in tabTitle" :key="index" @click="longClick(index)">
					<i class="iconfont">&#xe67b;</i>
					<span>{{ item.name }}</span>
				</view>
			</view>
			<swiper class="swiperBox" :current="currentTab" @change="swiperTab">
				<swiper-item v-for="(listItem, listIndex) in tabTitle" :key="listIndex">
					<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="lower1" scroll-with-animation :scroll-into-view="toView">
						<view class="content" v-if="listItem.listData.length > 0">
							<view class="card" v-for="(item, index) in listItem.listData" :key="index">
								<new-item :ref="'videoRef_' + index" :new="item" :myarticle="true" @videoPlay="videoPlay" :newIndex='index' @delOver="delOver"></new-item></view>
						</view>

						<nodata top="30%" v-if="listItem.listData.length == 0 && loadingOver"></nodata>
						<view class="nomore" v-if="listItem.lastDocId == '' && listItem.listData.length > 0">
							没有更多了 ~
						</view>	
						<view style="width: 100%;height: 500rpx;opacity:0;">底部占位盒子</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		
	</view>
	</view>
</template>

<script>
const util = require('@/common/refresh.js');
import newItem from '@/components/new-item.vue';
export default {
	components: {  newItem },
	props:{
		isMy:{
			type:Boolean,
			default:false
		},
		isFixed:{
			type:Boolean,
			default:false
		},
		username:{
			type:String,
			default:''
		}
	},
	data() {
		return {
			loadingOver:false,
			toView: '', //回到顶部id
			currentPage: 'longIndex',
			currentTab: 0, //sweiper所在页
			pages: [1, 1, 1, 1, 1, 1, 1, 1, 1], //第几页存储
			tabTitle: [],
			listData: [],
			defaultHeight: '',
			query: {
				publisher:uni.getStorageSync('username')?uni.getStorageSync('username'):'',
				isDraft:false,
				queryFromMine: true,
				pageSize: 10,
				lastDocId: '',
				categoryIds: []
			},
			//导航栏
			tabClick: 0, //导航栏被点击
			isLeft: 0, //导航栏下划线位置
			isWidth: 0, //每个导航栏占位
			tabLeft: 0
		};
	},
	
	created() {
		// this.getAllCategories();
	},
	methods: {
		videoPlay(currentIndex) {
			console.log('videoPlay on articlelist component', currentIndex)
			Object.keys(this.$refs).forEach((refKey) => {
				if (refKey.startsWith('videoRef_')) {
					const index = parseInt(refKey.replace('videoRef_', ''), 10);
					if (index !== currentIndex) {
						this.$refs[refKey][0].videoPause();
					}
				}
			});
		},
		// 获取导航栏信息
		getAllCategories() {
			let tabBars = [];
			this.$api.getAllCategories().then(res => {
				if (res) {
					for (let i in res) {
						tabBars.push({
							name: res[i],
							id: i
						});
					}
					this.tabTitle = tabBars;
					this.tabTitle.forEach(item=>{item.listData = [],item.isgetData = false,item.lastDocId = ''})
					//设置导航栏宽度
					this.setNavwidth();
					if(this.username){
						this.query.publisher = this.username
					}
					this.getData(0);
				}
			});
		},
		delOver(index){
			console.log(index)
			let arr = JSON.parse(JSON.stringify(this.tabTitle[this.currentTab].listData))
			arr.splice(index,1)
			this.tabTitle[this.currentTab].listData  =[]
			this.$forceUpdate()
			setTimeout(()=>{
				this.tabTitle[this.currentTab].listData = arr
				this.$forceUpdate()
			})
		},
		setNavwidth() {
			var that = this;
			// 获取设备宽度
			const query = uni.createSelectorQuery().in(this);
			      // 选择div
			      query.select('.indexPage').boundingClientRect(data => {
			        // data中包含元素的宽度、高度等信息
			        if (data) {
					  uni.getSystemInfo({
					  	success(e) {
					  		if (that.tabTitle.length <= 5) {
					  			that.isWidth =data.width / that.tabTitle.length; //宽度除以导航标题个数=一个导航所占宽度
					  		} else {
					  			that.isWidth =data.width / 5;
					  		}
					  	}
					  });
			        }
			      }).exec(); // 执行查询
				  
			
		},
	
		
		getData(index,type) {
			uni.showLoading({
				title: '加载中...'
			});
			this.loadingOver = false
			this.query.lastDocId = this.tabTitle[index].lastDocId
			this.$api.queryArticles(this.query).then(res => {
				console.log(res);
				if(type){
					this.tabTitle[index].listData = [...this.tabTitle[index].listData, ...res.list];
				}else{
					this.tabTitle[index].listData =res.list;
				}
				this.tabTitle[index].isgetData =true
				
				
				
				if (res.lastDocId) {
					this.tabTitle[index].lastDocId = res.lastDocId;
				}else{
					this.tabTitle[index].lastDocId = ''
				}

				uni.hideLoading();
				this.loadingOver = true
			});
		},
		// 导航栏点击
		longClick(index) {
			if (this.tabTitle.length > 5) {
				var tempIndex = index - 2;
				tempIndex = tempIndex <= 0 ? 0 : tempIndex;
				this.tabLeft = (index - 2) * this.isWidth; //设置下划线位置
			}
			this.tabClick = index; //设置导航点击了哪一个
			this.isLeft = index * this.isWidth;
			this.changeTab(index);
		},
		toTop() {
			this.toView = '';
			setTimeout(() => {
				this.toView = 'top' + this.currentTab;
			}, 10);
		},
		
		changeTab(index) {
			this.currentTab = index;

			if (index == 0) {
				this.query.categoryIds = [];
			} else {
				this.query.categoryIds = [this.tabTitle[this.currentTab].id];
			}
			
			if(this.tabTitle[index].listData.length>0 && this.tabTitle[index].isgetData == true){
				return
			}else{
				this.toTop()
			}
			
			this.getData(index);
			// this.listData = [];
			// this.query.lastDocId = '';
			console.log(this.currentTab);
		},
		// swiper 滑动
		swiperTab: function(e) {
			var index = e.detail.current; //获取索引
			this.longClick(index);
		},
		// 加载更多 util.throttle为防抖函数
		lower1: util.throttle(function(e) {
			console.log(`加载${this.currentTab}`); //currentTab表示当前所在页数 根据当前所在页数发起请求并带上page页数
			if (this.tabTitle[this.currentTab].lastDocId) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.getData(this.currentTab,1);
			}
		}, 300),
	
		toSearch() {
			uni.navigateTo({
				url: '/pages/news/search'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.barHeight {
	height: var(--status-bar-height);
	background-color: #de4849;
}

.swiperBox{
	height: calc(100vh );
	width: 84%;
}
.search {
	background-color: #de4849;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 120rpx;
	padding: 0 30rpx;
	width: 100%;
	z-index: 100;
	.fabu {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-left: 30rpx;
		image {
			width: 50rpx;
			height: 50rpx;
		}
		span {
			font-size: 25rpx;
			color: #fff;
		}
	}
}

.indexPage {
	width: 60%;
	font-size: 28upx;
	min-height: 100vh;
	overflow: hidden;
	color: #6b8082;
	position: relative;
	background-color: #f6f6f6;
	margin: 0 auto;
	border: 1px solid #dcdcdc;
	border-radius: 20rpx;
	margin-top: 30rpx;
	
	.leftbox{
		width: 16%;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx 0;
		border-right: 1px solid #dcdcdc;
		.list{
			width: 90%;
			height: 80rpx;
			display: flex;
			align-items: center;
			padding-left: 40rpx;
			margin: 10px auto;
			border-radius: 10rpx;
			cursor: pointer;
			color: #8d8d8d;
		}
		.iconfont{
			margin-right: 20rpx;
		}
		.list:hover{
			background-color: #f1f1f1;
			color: #de4849;
		}
		
		.active{
			background-color: #de4849;
			color: #fff;
		}
	}
}


.fixedTop{
	display: flex;
}
.content {
	width: 100%;
	.card {
		margin-bottom: 20rpx;
	}
}

.fiexed{
	position: fixed;
	top: 0;
	width: 100%;
	padding-top: 100rpx;
}
.nav {
	color: white;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	font-size: 30rpx;
	background-color: #fff;
	border-bottom: 1px solid #eee;
	
	.navTabBox {
		width: 100vw;
		.click {
			color: #de4849 !important;
			font-weight: bold;
		}
		.longTab {
			width: 100%;
			.longItem {
				height: 90upx;
				display: inline-block;
				line-height: 90upx;
				text-align: center;
				color: #999;
			}
			.underlineBox {
				height: 3px;
				width: 20%;
				display: flex;
				align-content: center;
				justify-content: center;
				transition: 0.5s;
				.underline {
					width: 84upx;
					height: 4px;
					background-color: #de4849;
				}
			}
		}
	}
}
</style>
